<template>
  <FPage>
    <div class="default-form-menu-list-wrapper">
      <div class="default-form-menu-list-header">
        <SearchWrapper :searchFields="searchFields" ref="refSearchWrapper"/>
        <div class="default-form-search-item">
          <el-button icon="search" round type="primary" style="margin-left: 5px" @click="search">搜索</el-button>
          <el-button icon="reload" round @click="reset">重置</el-button>
        </div>
      </div>
      <FormListButton :selections="selections" @reload="reload" :formMenu="menuVo.formMenu" :formDefinition="menuVo.formDefinition"/>

      <div class="default-form-menu-list-body">
        <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
                  :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
                  class="form-process-todo-list-table" v-loading="loading" width="100%" style="width: 100%">
          <el-table-column type="selection" width="40"/>

          <el-table-column v-for="field in listFields" show-overflow-tooltip sortable
                           :prop="field.tableFieldName" :label="field.showName">
            <template #default="{row}">
              <ListColumnDelegate :component="field.component" :field="field" :data="row"/>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div class="default-form-menu-list-footer">
        <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="pageOptions"
            background layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" small
            @size-change="search"
            @current-change="pageChange"
        />
      </div>
    </div>
  </FPage>
</template>
<script setup name="DefaultFormListComponent">
import FPage from '@/components/layout/FPage.vue';
import {getCurrentInstance, reactive, shallowRef, watch} from 'vue';
import {DefaultAppMenu, DefaultFormDefinition, DefaultMenuDefinition} from '@/components/form/DefaultFormDefinition';
import FormListComponentHelper from '@/components/platwork/DefaultFormListComponent/FormListComponentHelper';
import './style.css';
import SearchWrapper from '@/components/platwork/DefaultFormListComponent/SearchWrapper.vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import {postAction} from '@/request/BaseRequest';
import ListColumnDelegate from '@/components/form/FormInputDelegates/ListColumnDelegate.vue';
import FormListButton from '@/components/platwork/FormListButton';

const internalInstance = getCurrentInstance();
const global = internalInstance.appContext.config.globalProperties;

defineOptions({
  name: 'DefaultFormListComponent'
});

const listFields = reactive([]);
const searchFields = reactive([]);
const props = defineProps({
  menuVo: {
    appMenu: JSON.parse(JSON.stringify(DefaultAppMenu)),
    formMenu: JSON.parse(JSON.stringify(DefaultMenuDefinition)),
    formDefinition: JSON.parse(JSON.stringify(DefaultFormDefinition))
  }
});
const searchParams = shallowRef({});
const refSearchWrapper = shallowRef();
const selections = shallowRef();

watch(() => props.menuVo, () => {
  let helper = new FormListComponentHelper(props.menuVo.appMenu, props.menuVo.formDefinition, props.menuVo.formMenu);
  listFields.push(...helper.parseListFields());
  searchFields.push(...helper.parseSearchFields());
  search();
});

function reset() {
  refSearchWrapper.value.reset();
  search();
}

function reload() {
  search(true);
}

const searchForm = {
  value: {
    validate(callback) {
      searchParams.value = refSearchWrapper.value.getFieldSearchData();
      callback(true);
    },
  }
};

function doSearch(params) {
  params.formMenuId = props.menuVo.formMenu.id;

  postAction('/platwork/formlist/queryPage', params).then(data => {
    loading.value = false;
    if (data.success) {
      let result = data.result;
      setSearchResult(result);
    }
  });
}

function onSelection(rows) {
  selections.value = rows;
}

function onRowClick(row) {

  let url = `${props.menuVo.formMenu.detailPageUrl}?dataId=${row.id}&appMenuId=${props.menuVo.appMenu.id}&fullScreen=1&action=detail`;
  global.$windowManager.open(url, {
    title: '详情',
    close: () => search(true),
  });
}

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: undefined,
    order: undefined,
  },
  searchParams,
  rowClick: onRowClick,
  selectionChange: onSelection
});
</script>
